<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<base-input :label="label" v-model="value"></base-input>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		Vue.component('base-input', {
		  inheritAttrs: false,
		  props: ['label', 'value'],
		  computed: {
		    inputListeners: function () {
		      var vm = this
		      // `Object.assign` 将所有的对象合并为一个新对象
		      const res = Object.assign({},
		        // 我们从父级添加所有的监听器
		        this.$listeners,
		        // 然后我们添加自定义监听器，
		        // 或覆写一些监听器的行为
		        {
		          // 这里确保组件配合 `v-model` 的工作
		          input: function (event) {
		            vm.$emit('input', event.target.value)
		          }
		        }
		      )
			  console.log(res);
			  return res
		    }
		  },
		  template: `
		    <label>
		      {{ label }}
		      <input
		        v-bind="$attrs"
		        v-bind:value="value"
		        v-on="inputListeners"
		      >
			  {{value}}
		    </label>
		  `
		})
		
		
		const vm = new Vue({
			el:'#app',
			data:{
				label:'名字',
				value:'最帅的帅'
			},
			watch:{
				value(newValue,oldValue){
					console.log(newValue, oldValue);
				}
			},
			
		})
		
	</script>
</html>
